import ContentWrapper from '../../../components/ContentWrapper';
import './index.scss';
import SwitchTabs from '../../../components/SwitchTabs';
import { useState } from 'react';
import useFetch from '../../../hooks/useFetch';
import Carousel from '../../../components/Carousel';

const Popular: React.FC = () => {
  const [endpoint, setEndpoint] = useState('movie');

  const { data, loading } = useFetch(`/${endpoint}/popular`);

  const onTabChange = (tab: string) => {
    setEndpoint(tab === '电影' ? 'movie' : 'tv');
  };

  return (
    <div className="carousel-section">
      <ContentWrapper>
        <span className="carousel-title">流行</span>
        <SwitchTabs data={['电影', '电视剧']} onTabChange={onTabChange} />
      </ContentWrapper>
      <Carousel data={data?.results} loading={loading} endpoint={endpoint}></Carousel>
    </div>
  );
};

export default Popular;
